<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML 常见标签示例</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        section { border: 1px solid #ccc; margin: 10px 0; padding: 10px; }
        h1,h2,h3,h4,h5,h6 { margin: 5px 0; }
        table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; }
        mark { background: yellow; }
    </style>
</head>
<body>

<!-- 页面头部 -->
<header>
    <h1>这是 header（头部）</h1>
    <nav>
        <!-- 导航 -->
        <a href="#">首页</a> |
        <a href="#">文章</a> |
        <a href="#">关于</a>
    </nav>
</header>

<!-- 主体内容 -->
<main>
    <section>
        <h2>&lt;section&gt; 区块示例</h2>
        <article>
            <h3>&lt;article&gt; 独立文章示例</h3>
            <p>&lt;p&gt; 段落：这是一个段落。</p>
            <p>再来一个段落，其中有 <strong>&lt;strong&gt; 强调文字</strong> 和 <em>&lt;em&gt; 斜体文字</em>。</p>
            <blockquote>&lt;blockquote&gt; 引用段落：学而不思则罔，思而不学则殆。</blockquote>
            <pre>&lt;pre&gt; 预格式化文本（保留空格和换行）
行1
    行2（有缩进）
        行3
        </pre>
        </article>
    </section>

    <!-- 列表 -->
    <section>
        <h2>列表</h2>
        <ul>
            <li>&lt;ul&gt; 无序列表项</li>
            <li>第二项</li>
        </ul>
        <ol>
            <li>&lt;ol&gt; 有序列表项 1</li>
            <li>第二项</li>
        </ol>
        <dl>
            <dt>&lt;dt&gt; 术语</dt>
            <dd>&lt;dd&gt; 术语的解释</dd>
        </dl>
    </section>

    <!-- 表单 -->
    <section>
        <h2>表单</h2>
        <form>
            <fieldset>
                <legend>&lt;fieldset&gt; 表单分组</legend>
                <label for="name">&lt;label&gt; 姓名：</label>
                <input type="text" id="name" placeholder="请输入姓名"><br><br>
                <label for="msg">留言：</label>
                <textarea id="msg" rows="3" cols="30"></textarea><br><br>
                <select>
                    <option>选项1</option>
                    <option>选项2</option>
                </select><br><br>
                <button type="submit">提交</button>
            </fieldset>
        </form>
    </section>

    <!-- 表格 -->
    <section>
        <h2>表格</h2>
        <table>
            <tr>
                <th>&lt;th&gt; 表头1</th>
                <th>表头2</th>
            </tr>
            <tr>
                <td>&lt;td&gt; 单元格1</td>
                <td>单元格2</td>
            </tr>
        </table>
    </section>

    <!-- 行内元素 -->
    <section>
        <h2>行内元素</h2>
        <p>
            <span>&lt;span&gt; 行内容器</span><br>
            <b>&lt;b&gt; 粗体（无语义）</b><br>
            <strong>&lt;strong&gt; 粗体（有语义，强调）</strong><br>
            <i>&lt;i&gt; 斜体（无语义）</i><br>
            <em>&lt;em&gt; 斜体（强调）</em><br>
            <u>&lt;u&gt; 下划线</u><br>
            <mark>&lt;mark&gt; 高亮</mark><br>
            <small>&lt;small&gt; 小字</small><br>
            <abbr title="Hyper Text Markup Language">&lt;abbr&gt; HTML 缩写</abbr><br>
            <code>&lt;code&gt; 代码片段</code><br>
            <kbd>&lt;kbd&gt; 用户输入 Ctrl+C</kbd><br>
            <samp>&lt;samp&gt; 程序输出示例</samp><br>
            <a href="#">这是 &lt;a&gt; 链接</a><br>
            <img src="https://via.placeholder.com/50" alt="示例图片"><br>
            换行示例：第一行<br>第二行（使用 &lt;br&gt;）
        </p>
    </section>

</main>

<!-- 侧边栏 -->
<aside>
    <h2>aside 侧边栏</h2>
    <p>这里通常放广告或推荐内容。</p>
</aside>

<!-- 页脚 -->
<footer>
    <p>这是 footer（底部），包含 <small>版权信息</small>。</p>
</footer>

</body>
</html>
<!--
好的 ✅ 我来简述一下常见 **块级标签、行内标签、行内块标签** 的主要作用，方便你快速掌握。

-&#45;&#45;

## 🔹 块级标签（Block-level Elements）

> 用来搭建网页结构、段落、布局，默认独占一行。

* `<div>`：通用容器，用于布局和包裹元素（无语义）。

    * `<header>`：网页或区块的头部，通常包含 logo、导航。

        * `<footer>`：网页或区块的底部，通常包含版权、联系方式。

            * `<section>`：页面中的一个内容区块（带语义）。

                * `<article>`：独立的文章或帖子内容。

                    * `<nav>`：导航栏，包含菜单或链接。

                        * `<aside>`：侧边栏，通常放广告、推荐等。

                            * `<main>`：页面的主要内容（HTML5新增）。

                                * `<p>`：段落（paragraph）。

                                    * `<h1> ~ <h6>`：标题标签，`h1` 最大，`h6` 最小。

                                    * `<blockquote>`：引用长内容。

                                        * `<pre>`：保留空格和换行的文本（预格式化）。

* `<ul>`：无序列表（带点）。

* `<ol>`：有序列表（带数字）。

* `<li>`：列表项。

* `<dl>`：定义列表。

* `<dt>`：定义项的名称。

* `<dd>`：定义项的描述。

* `<form>`：表单容器。

* `<fieldset>`：表单分组。

* `<table>`：表格。

* `<tr>`：表格行。

* `<td>`：表格单元格。

* `<th>`：表格表头单元格。

-&#45;&#45;

## 🔹 行内标签（Inline Elements）

> 用来修饰文本、嵌入链接、图标等，不会独占一行。

* `<span>`：通用行内容器，用于小范围样式。

* `<b>`：加粗（无语义）。

* `<strong>`：强调加粗（有语义，重要内容）。

* `<i>`：斜体（无语义）。

* `<em>`：强调斜体（有语义）。

* `<u>`：下划线。

* `<mark>`：高亮标记。

* `<small>`：小号文字（通常用于版权声明）。

* `<abbr>`：缩写，支持 `title` 提示。

* `<A>`：超链接。

* `<img>`：插入图片。

* `<label>`：表单标签，用于绑定输入框。

* `<input>`：输入框（严格说是行内块）。

* `<textarea>`：多行输入框（严格说是行内块）。

* `<code>`：行内代码。

* `<kbd>`：用户输入（键盘输入提示）。

* `<samp>`：程序输出示例。

* `<br>`：换行符。

-&#45;&#45;

## 🔹 行内块标签（Inline-block Elements）

> 既不独占一行，又可以设置宽高。

* `<img>`：图片。
* `<input>`：单行输入框。
* `<button>`：按钮。
* `<select>`：下拉框。
* `<textarea>`：多行输入框。

-&#45;&#45;

👉 总结一句话：

* **块级**：结构和布局用的。
* **行内**：文字修饰和小部件。
* **行内块**：输入、按钮、图片这类需要宽高但不独占一行的。

要不要我帮你做一个 **小 demo（HTML+CSS 示例）**，直观展示这三类标签的区别？-->

